<!-- Tabla resumen -->
		<h4 ih:if="${queryVipTimeResult not empty}" class="c-grey-900 mB-20 mt-5" th:text="#{table.summary.title}"></h4>

		<div class="masonry-sizer col-md-12 bgc-white">
			<table id="queryVipTable" class="display" style="cellspacing: 0; width: 100%;">
				<thead>
					<tr>
						<th th:text="#{table.query.vip.status}">Status</th>
						<th th:text="#{table.query.vip.system}">System</th>
						<th th:text="#{table.query.vip.service}">Service</th>
						<th th:text="#{table.query.vip.samplingtime}">Sampling time</th>
					</tr>
				</thead>
				<tbody>
					<tr th:each="result : ${queryVipTimeResult}">
						<td th:text="${result.status}"></td>
						<td th:text="${result.system}"></td>
						<td th:text="${result.service}"></td>
						<td th:text="${#temporals.format(result.samplingTime, 'dd-MM-yyyy HH:mm:ss')}"></td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- Fin tabla resumen -->
		
<script th:inline="javascript">

$(document).ready(function() {
	
	var buttonCommon = {
	        exportOptions: {
	            format: {
	                body: function ( data, row, column, node ) {
	                    
	                    return data;
	                }
	            }
	        }
	    };
	
	var tableVipQuery = $('#queryVipTable').DataTable({
		"pagingType" : "full_numbers",
		"initComplete" : function(settings, json) {
			//eliminamos el scroll inferior
			$('#queryVipTable_wrapper .dataTables_scrollBody').css("overflow-x", "hidden");
			//$('#queryVipTable_length').addClass("hidden");
			//$('#queryVipTable_filter').addClass("hidden");
			//$('#queryVipTable_info').addClass("hidden");
			//$('#queryVipTable_paginate').addClass("hidden");
		},
		dom: 'Bfrtip',
		buttons: [
            $.extend( true, {}, buttonCommon, {
                extend: 'copyHtml5'
            } ),
            $.extend( true, {}, buttonCommon, {
                extend: 'excelHtml5',
                title: 'Consulta de estados VIP',
                filename: 'vipstatusquery'
            } ),
            $.extend( true, {}, buttonCommon, {
                extend: 'pdfHtml5',
                title: 'Consulta de estados VIP',
				filename: 'vipstatusquery',
                customize: function ( doc ) {
                    
                    doc.content.splice( 0, 0, {
                        margin: [ 0, 0, 0, 0 ],
                        alignment: 'right',
                        image: ''
                    } );
					
                }
            } )
        ],
		"language": {
	        "url": "js/datatables/i18n/spanish.json",
	        select: {
	            rows: {
	                _: "%d filas seleccionadas",
	                1: "1 fila seleccionada"
	            }
	          }
	        },
		"order" : [ 0, 'desc' ],
		responsive : {
			details : {
				type : 'column',
				target : -1
			}
		}

	});
});
</script>